<template>
    <div class="container">
        <el-form ref="form" :model="form" label-width="120px" size="mini" v-loading="saveLoding">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="纳税人名称">
                        <el-input v-model="form.qymc" suffix-icon="el-icon-search"></el-input>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纳税人识别号">
                        <el-input v-model="form.tyshxydm"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="数据年度">
                        <!-- <el-input v-model="form.sjnd"></el-input> -->
                        <el-date-picker v-model="form.sjnd" value-format="yyyy" type="year" placeholder="选择年">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="数据列表">
                        <div class="head_tb">
                            <div>
                                <el-button type="danger" size="mini" class="mybtn" @click="delExcel()"><i class="el-icon-minus"></i></el-button>
                                <el-button type="danger" size="mini" class="mybtn" @click="upload()"><i class="el-icon-plus"></i></el-button>
                            </div>
                            <div class="title_tb">共 {{tableDatas.length}} 个</div>

                        </div>
                        <el-table v-loading="loading" ref="bqEltable" :data="tableDatas" style="width: 100%" fit border @selection-change="dochandleSelectionChange">
                            <el-table-column type="selection" width="63" align="center"> </el-table-column>
                            <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                            <el-table-column label="文件名称" prop="wjmc" align="center">
                                <template slot-scope="scope">
                                    <div class="underline-text" @click="showExcelTable(scope.row)">
                                        {{scope.row.wjmc}}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="数据量" prop="sjl" align="center">
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="说明">
                        <el-input type="textarea" v-model="form.illustrate" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="上传时间">
                        <el-input v-model="form.scsj" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上传人">
                        <el-input v-model="form.scry" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body width="1440px" top="6vh">
            <div class="fileView" ref="fileView">

                <!-- if (this.flag == '1') {
                this.dialogtableColumns.push(...this.kmbColumns)
            } else if (this.flag == '2') {
                this.dialogtableColumns.push(...this.kmyyeColumns)
            } else if (this.flag == '3') {
                this.dialogtableColumns.push(...this.pzbColumns)
            } else if (this.flag == '4') {
                this.dialogtableColumns.push(...this.fzzyyebColumns)
            } else if (this.flag == '5') {
                this.dialogtableColumns.push(...this.fzzmxbColumns)
            } -->

                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='1'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="kmbColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />

                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='2'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="kmyyeColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />

                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='3'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="pzbColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />

                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='4'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="fzzyyebColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />

                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='5'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="fzzmxbColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />
                <my-table v-loading="dialogLoading" ref="myEltable" v-show="flag=='6'" :height="dialogHeight-44" style="width: 100%" row-key="id" :showsummary="false" :columns="qyxxColumns" :tableData="dialogtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="queryObj.total" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="false" />

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { add, queryByQymc, queryExcel, deleteById } from '@/api/zcgj/yzgj'
export default {
    props: {
        row: {
            type: Object,
            default: false
        }
    },
    data() {
        return {
            saveLoading: false,
            dialogVisible: false,
            dialogLoading: false,
            dialogTitle: '',
            form: {
                qymc: this.row.qymc,
                tyshxydm: this.row.tyshxydm,
                illustrate: this.row.illustrate,
                sjnd: this.row.sjnd,
                scsj: this.row.scsj,
                scry: this.row.scry,

            },

            files: [],

            rwform: [],
            loading: false,
            tableDatas: [],
            docSelect: [],
            dialogtableColumns: [],

            kmbColumns: [  //1-科目表
                {
                    label: '所属年度',
                    prop: 'ssnd',
                    align: 'center',


                },
                {
                    label: '科目代码',
                    prop: 'kmdm',
                    align: 'center',


                },
                {
                    label: '科目名称',
                    prop: 'kmmc',
                    align: 'center',
                    minWidth: 200

                },
                {
                    label: '父级科目代码',
                    prop: 'fjkmdm',
                    align: 'center',

                },
                {
                    label: '账套代码',
                    prop: 'ztdm',
                    align: 'center',

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',

                },

            ],

            kmyyeColumns: [  //2-科目月余额表
                {
                    label: '所属年度',
                    prop: 'ssnd',
                    align: 'center',

                },
                {
                    label: '期间',
                    prop: 'qj',
                    align: 'center',

                },
                {
                    label: '科目代码',
                    prop: 'kmdm',
                    align: 'center',

                },
                {
                    label: '借方期初余额',
                    prop: 'jfqcye',
                    align: 'center',

                },
                {
                    label: '贷方期初余额',
                    prop: 'dfqcye',
                    align: 'center',

                },
                {
                    label: '账套代码',
                    prop: 'ztdm',
                    align: 'center',

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',

                }
            ],

            pzbColumns: [  //3-凭证表
                {
                    label: '所属年度',
                    prop: 'ssnd',
                    align: 'center',

                }
                ,
                {
                    label: '期间',
                    prop: 'qj',
                    align: 'center',

                }
                ,
                {
                    label: '凭证字',
                    prop: 'pzz',
                    align: 'center',

                }
                ,
                {
                    label: '凭证号',
                    prop: 'pzh',
                    align: 'center',

                }
                ,
                {
                    label: '附列号',
                    prop: 'flh',
                    align: 'center',

                }
                ,
                {
                    label: '凭证日期',
                    prop: 'pzrq',
                    align: 'center',

                }
                ,
                {
                    label: '摘要',
                    prop: 'zy',
                    align: 'center',

                }
                ,
                {
                    label: '科目代码',
                    prop: 'kmdm',
                    align: 'center',

                }
                ,
                {
                    label: '借方发生额',
                    prop: 'jffse',
                    align: 'center',

                }
                ,
                {
                    label: '贷方发生额',
                    prop: 'dffse',
                    align: 'center',

                },
                {
                    label: '外币标志',
                    prop: 'wbbz',
                    align: 'center',

                },
                {
                    label: '外币借方发生额',
                    prop: 'wbjffse',
                    align: 'center',

                },
                {
                    label: '外币贷方发生额',
                    prop: 'wbdffse',
                    align: 'center',

                },
                {
                    label: '账套代码',
                    prop: 'ztdm',
                    align: 'center',

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',

                },
                
            ],


             qyxxColumns: [  //41-企业信息表
                {
                    label: '账套代码',
                    prop: 'ztdm',
                    align: 'center',

                }
                ,
                {
                    label: '账套名称',
                    prop: 'ztmc',
                    align: 'center',

                }
                ,
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',

                }
                ,
                {
                    label: '所属年度',
                    prop: 'ssnd',
                    align: 'center',

                }
                ,
                {
                    label: '集团代码',
                    prop: 'jtdm',
                    align: 'center',

                }
               
                
            ],




            fzzyyebColumns: [  //4-辅助账月余额表
                {
                    label: '核算项目编号',
                    prop: 'hsxmbh',
                    align: 'center',

                },
                {
                    label: '核算项目名称',
                    prop: 'hsxmmc',
                    align: 'center',

                },
                {
                    label: '核算项目类型编号',
                    prop: 'hsxmlxbh',
                    align: 'center',

                },

                {
                    label: '核算项目类型名称',
                    prop: 'hsxmlxmc',
                    align: 'center',

                },
                {
                    label: '科目编号',
                    prop: 'kmbh',
                    align: 'center',

                },
                {
                    label: '科目名称',
                    prop: 'kmmc',
                    align: 'center',

                },
                {
                    label: '月份',
                    prop: 'yf',
                    align: 'center',

                },
                {
                    label: '期初余额',
                    prop: 'qcye',
                    align: 'center',

                },
                {
                    label: '本期借方发生额',
                    prop: 'bqjffse',
                    align: 'center',

                },
                {
                    label: '本期贷方发生额',
                    prop: 'bqdffse',
                    align: 'center',

                },
                {
                    label: '本期发生额',
                    prop: 'bqfse',
                    align: 'center',

                },
                {
                    label: '本期借方累计发生额',
                    prop: 'bqjfljfse',
                    align: 'center',

                },
                {
                    label: '本期贷方累计发生额',
                    prop: 'bqdfljfse',
                    align: 'center',

                },
                {
                    label: '本期累计发生额',
                    prop: 'bqljfse',
                    align: 'center',

                },
                {
                    label: '期末余额',
                    prop: 'qmye',
                    align: 'center',

                },
                {
                    label: '期初数量',
                    prop: 'qcsl',
                    align: 'center',

                },
                {
                    label: '本期借方数量',
                    prop: 'bqjfsl',
                    align: 'center',

                },
                {
                    label: '本期贷方数量',
                    prop: 'bqdfsl',
                    align: 'center',

                },
                {
                    label: '本期借方累计数量',
                    prop: 'bqjfljsl',
                    align: 'center',

                },
                {
                    label: '本期贷方累计数量',
                    prop: 'bqdfljsl',
                    align: 'center',

                },
                {
                    label: '期末数量',
                    prop: 'qmsl',
                    align: 'center',

                },
                {
                    label: '期初外币',
                    prop: 'qcwb',
                    align: 'center',

                },
                {
                    label: '外币本期借方发生额',
                    prop: 'wbbqjffse',
                    align: 'center',

                },
                {
                    label: '外币本期贷方发生额',
                    prop: 'wbbqdffse',
                    align: 'center',

                },
                {
                    label: '外币本期发生额',
                    prop: 'wbbqfse',
                    align: 'center',

                },
                {
                    label: '外币本期借方累计发生额',
                    prop: 'wbbqjfljfse',
                    align: 'center',

                },
                {
                    label: '外币本期贷方累计发生额',
                    prop: 'wbbqdfljfse',
                    align: 'center',

                },
                {
                    label: '外币本期累计发生额',
                    prop: 'wbbqljfse',
                    align: 'center',

                },
                {
                    label: '期末外币',
                    prop: 'wbbqljfse',
                    align: 'qmwb',

                }

            ],



            fzzmxbColumns: [  //   5-辅助帐明细表"
                {
                    label: '凭证日期',
                    prop: 'pzrq',
                    align: 'center',

                },
                {
                    label: '凭证月份',
                    prop: 'pzyf',
                    align: 'center',

                },
                {
                    label: '凭证类型',
                    prop: 'pzlx',
                    align: 'center',

                },
                {
                    label: '凭证编号',
                    prop: 'pzbh',
                    align: 'center',

                },
                {
                    label: '分录号',
                    prop: 'flh',
                    align: 'center',

                },
                {
                    label: '摘要',
                    prop: 'zy',
                    align: 'center',

                },
                {
                    label: '科目编号',
                    prop: 'kmbh',
                    align: 'center',

                },
                {
                    label: '科目名称',
                    prop: 'kmmc',
                    align: 'center',

                },
                {
                    label: '核算项目编号',
                    prop: 'hsxmbh',
                    align: 'center',

                },
                {
                    label: '核算项目名称',
                    prop: 'hsxmmc',
                    align: 'center',

                },
                {
                    label: '核算项目类型编号',
                    prop: 'hsxmlxbh',
                    align: 'center',

                },
                {
                    label: '核算项目类型名称',
                    prop: 'hsxmlxmc',
                    align: 'center',

                },
                {
                    label: '借方金额',
                    prop: 'jfje',
                    align: 'center',

                },
                {
                    label: '贷方金额',
                    prop: 'dfje',
                    align: 'center',

                },
                {
                    label: '单价',
                    prop: 'dj',
                    align: 'center',

                },
                {
                    label: '借方数量',
                    prop: 'jfsl',
                    align: 'center',

                },
                {
                    label: '贷方数量',
                    prop: 'dfsl',
                    align: 'center',

                },
                {
                    label: '币种',
                    prop: 'bz',
                    align: 'center',

                },
                {
                    label: '汇率',
                    prop: 'hl',
                    align: 'center',

                },
                {
                    label: '计量单位',
                    prop: 'jldw',
                    align: 'center',

                },
                {
                    label: '借方外币',
                    prop: 'jfwb',
                    align: 'center',

                },
                {
                    label: '贷方外币',
                    prop: 'dfwb',
                    align: 'center',

                },
            ],


            dialogtableDatas: [],
            queryObj: {
                pageNo: 1,
                pageSize: 20,
                total: 0
            },

            wjid: '',
            flag: '',
            dialogHeight: '',
            saveLoding:false
        }
    },
    mounted() {
        this.getqueryByQymc()

        // this.getqueryExcel()
    },
    methods: {
        getqueryByQymc() {
            this.loading = true
            let param = {
                qymc: this.row.qymc,
                sjnd: this.row.sjnd,
            }
            queryByQymc(param).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data
                }
            })
        },



        showExcelTable(row) {
            this.dialogtableDatas = []
            this.queryObj.total = 0
            // this.dialogtableColumns = []


            this.wjid = row.id
            this.flag = row.flag
            console.log(row.flag)
            let wjmc = row.wjmc
            this.dialogTitle = (row.wjmc).split('.')[0]






            this.$nextTick(() => {

                this.dialogHeight = this.$refs.fileView.offsetHeight
            })
            this.dialogVisible = true
            this.getqueryExcel()
        },
        getqueryExcel() {
            this.dialogLoading = true
            this.dialogtableDatas = []
            let param = {
                dataId: this.wjid,
                pageNo: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize
            }
            queryExcel(param).then(res => {
                this.dialogLoading = false
                if (res.code == 200) {
                    this.dialogtableDatas = res.data.records
                    this.queryObj.total = res.data.total
                }
            })
        },
        delExcel() {
            if (this.docSelect.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.docSelect.forEach(item => {
                        ids.push({
                            dataId: item.id, flag: item.flag
                        })
                    })
                    deleteById({ list: ids }).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getqueryByQymc()
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                }).catch(error => {
                    this.loading = false;
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
        },

        onSubmit() {
            const reg = /^[0-9]+$/;

            if (this.form.qymc == '') {
                this.$message.error('请输入企业名称')
                return false
            }
            if (this.form.tyshxydm == '') {
                this.$message.error('请输入社会信用代码')
                return false
            }
            if (this.form.sjnd == '') {
                this.$message.error('请输入所属年度')
                return false
            } else if (!reg.test(this.form.sjnd)) {
                this.$message.error('请输入0-9之间的数字')
                return false
            }

            if (this.tableDatas.length <= 0) {
                this.$message.error('请上传文件')
                return false
            }
            let fd = new FormData();
            fd.append("sjnd", this.form.sjnd);
            fd.append("tyshxydm", this.form.tyshxydm);
            fd.append("qymc", this.form.qymc);
            fd.append("illustrate", this.form.illustrate);
            for (let i = 0; i < this.files.length; i++) {

                fd.append("files", this.files[i].file, this.files[i].file.name);


            }
            this.save(fd)

            console.log('submit!');
        },


        save(data) {
            this.saveLoding = true
            add(data).then((res) => {
                this.saveLoding = false
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: '保存成功',
                    });
                    // this.getTableData()
                    this.go('list')

                }
            });
        },
        //s上传名册
        upload() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {
            // console.log('文件状态改变前',file);
            // if(!file.name.includes('.pdf')) {
            //     this.$message.error('请上传pdf格式文件')
            //     return false
            // }

            // if (file.size > 1024 * 1024 * 10) {
            //     this.$message.warning(
            //         "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
            //     );
            //     return false;
            // }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data);
            // let fd = new FormData();
            // fd.append("file", data.file);

            this.tableDatas.push({
                wjmc: data.file.name
            })
            this.files.push(data)
            console.log(this.files)

        },
        currIndex(index) {
            return index + 1;
        },

        dochandleSelectionChange(selectedRows) {
            this.docSelect = selectedRows;
            console.log(this.docSelect)
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getqueryExcel()
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getqueryExcel()
        },
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .timeSelct {
        .el-input {
            display: inline;
        }
    }

    .el-dialog .el-dialog__body .el-form .el-select {
        display: inline !important;
    }

    ::v-deep .el-dialog .el-dialog__body .el-form .el-form-item__content {
        width: calc(100% - 100px);
    }
    .mybtn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding: 0;
    }

    .head_tb {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        .title_tb {
            // border-left:4px solid #ccc;
        }
    }
}
.underline-text {
    text-decoration: underline;
    color: #409eff;
    cursor: pointer;
}
.fileView {
    width: 100%;
    height: 75vh;
    padding: 8px;
    // overflow: hidden;
}
</style>